<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>用户中心</title>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.2/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <h1 class="page-header">用户中心</h1>
    <div class="row">
        <div class="col-md-12">
            <span th:text="${name}"></span>&nbsp;&nbsp;
            <span sec:authorize="isAuthenticated()" style="display: inline-block;">
                <a th:href="@{/updatePassword}">修改密码</a> &nbsp;&nbsp; <a th:href="@{/logout}">注销</a>
            </span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h2>Connections</h2>
            <table class="table table-bordered">
                <tr>
                    <th>Provider</th>
                    <th>Connected</th>
                    <th>DisplayName</th>
                    <th>Options</th>
                </tr>
                <tr th:each="conn : ${connections}">
                    <td th:text="${conn.provider}"></td>
                    <td th:text="${conn.connected}"></td>
                    <td th:text="${conn.displayName}"></td>
                    <td th:if="${!conn.connected}">
                        <form th:action="'/connect/'+ ${conn.provider}" method="POST">
                            <button type="submit" class="btn btn-default btn-xs">
                                Connect
                            </button>
                        </form>
                    </td>
                    <td th:if="${conn.connected}">
                        <form th:action="'/connect/'+ ${conn.provider}" method="POST">
                            <input type="hidden" name="_method" value="DELETE">
                            <button type="submit" class="btn btn-default btn-xs">
                                Disconnect
                            </button>
                        </form>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-md-12 ">
            <h2>Authorize</h2>

            <table class="table table-bordered">
                <tr>
                    <th>Client</th>
                    <th>Scope</th>
                    <th>Expires at</th>
                    <th>Actions</th>
                </tr>
                <tr th:each="app : ${approvals}">
                    <td th:text="${app.clientId}"></td>
                    <td th:text="${app.scope}"></td>
                    <td th:text="${app.expiresAt}"></td>
                    <td>
                        <form action="/approval/revoke" method="POST">
                            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                            <input type="hidden" name="userId" th:value="${app.userId}"/>
                            <input type="hidden" name="clientId" th:value="${app.clientId}"/>
                            <input type="hidden" name="scope" th:value="${app.scope}"/>
                            <input type="hidden" name="expiresAt" th:value="${#dates.format(app.expiresAt, 'yyyy-MM-dd HH:mm:ss')}"/>
                            <input type="hidden" name="status" th:value="${app.status}"/>
                            <input type="hidden" name="lastUpdatedAt" th:value="${#dates.format(app.lastUpdatedAt, 'yyyy-MM-dd HH:mm:ss')}"/>
                            <button type="submit" class="btn btn-default btn-xs">
                                <span class="glyphicon glyphicon-trash"></span>
                            </button>
                        </form>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>
